<template>
	<div class="root">
	<footer class="footers">
	<div class="left" v-for="(item,index) in list" :class="index == sort ? 'active':''" @click="root(item,index)">
	<i :class="item.icon"></i>
	    <p>{{item.title}}</p>
	</div>
	</footer>
	</div>
</template>

<script>
import {data} from '@/common/js/customer'
	export default {
		name:'root',
		props:{
			sort:{
				type:Number,
				default:0
			}
		},
		data () {
			return {
				list:data.titleList,
				//sort:2
			}
		},
		mounted () {
			
		},
		methods:{
		   root (item,index) {
		   	   this.$router.push(item.path)
		   }
		}
	}
</script>

<style lang="less" scoped>
    .root{
    	width:100%;
    	display: flex;
    	flex-direction: column;
    	.footers{    		
    		position: fixed;
    		height: 100px;
    		bottom: 0;
    		left: 0;
    		z-index: 88;
    		background: #FFFFFF;
    		border-top: 1px solid gainsboro;
    		width:100%;
    		font-size: 26px;
    		justify-content: center;
    		align-items: center;
    		display: -webkit-flex;
    		line-height:36px;
    		i{
    			font-size: 50px;
    		}
    		.left{
    			margin-top: 10px;
    			flex: 1;
    			text-align: center;
    			&.active{
    				color: 	#3CB371;
    			}
    			p{
    				font-size: 24px;
    			}
    		}
    	}
    }
</style>